<template>
  <div id="post-list">
    <b-container class="py-5">
      <div class="posts">
        <b-row class="py-3" v-for="post in posts" :key="post.id">
          <Brief :post="post" />
        </b-row>
      </div>
      <b-row>
        <b-pagination
          v-model="currentPage"
          :per-page="perPage"
          :total-rows="total"
          class="post-pagination mt-5"
          align="center"
          @change="changePaginationHandle"
        ></b-pagination>
      </b-row>
    </b-container>
  </div>
</template>

<script>
import Brief from "./Brief.vue";
export default {
  name: "Post",
  components: {
    Brief,
  },
  data() {
    return {
      perPage: 10, // 每页显示数量
      currentPage: 1, // 当前页
      total: 0, // 文章总数
      posts: [], // 文章列表
    };
  },

  methods: {
    getPosts() {
      const reqParams = {
        perPage: this.perPage,
        currentPage: this.currentPage,
      };
      this.$http.get("/blog/posts", { params: reqParams }).then(
        (res) => {
          const { meta, data } = res.data;
          // Ajax 发送成功，但获取数据失败
          if (meta.code != 200) return console.log(meta.msg);
          this.posts = data.posts;
          this.total = data.total;
        },
        // Ajax 返送数据失败
        (error) => {
          console.log(error);
        }
      );
    },

    // 分页器监听函数
    changePaginationHandle(page) {
      // 获取当前页码
      this.currentPage = page;
      // 重新获取列表
      this.getPosts();
    },

  },



  mounted(){
    this.getPosts();
  }
};
</script>

<style lang="less" scoped>
.posts {
  min-height: 1000px;
}
</style>